<template>
  <div v-if="!myShow">
    <el-popover
      placement="bottom"
      min-width
      trigger="click"
      v-model="popoverShow"
      :disabled="disable"
    >
      <div
        style="min-width: 150px;
        min-height: 200px;
        max-height: 300px;
        overflow:auto;"
      >
        <el-tree
          :data="treedata"
          node-key="ROOMNO"
          :default-expanded-keys="[11111,22222]"
          :expand-on-click-node="false"
          :props="defaultProps"
          @node-click="handleNodeClick"
        ></el-tree>
      </div>
      <el-input slot="reference" v-model="room" :disabled="disable" placeholder="请选择房间号"></el-input>
    </el-popover>
  </div>
  <div v-else>
    <el-tree
      :data="treedata"
      default-expand-all
      :expand-on-click-node="false"
      :props="defaultProps"
      @node-click="handleNodeClick"
    ></el-tree>
  </div>
</template>

<script>
import requestYg from "@/common/utils/requestYg";
import queryRoomInfo from "@/message/siteManagement/workplacemonitoring/roomManage";
//依赖elementui
//目前将点选择设值为单个独立选择
export default {
  mounted() {
    this.$nextTick(() => {
      this.room = this.ROOMNAME;
    });
  },
  props: {
    room: String,
    disable: Boolean,
    myShow: Boolean
  },
  watch: {},
  name: "selectTree",
  data() {
    return {
      ROOMNAME: this.room,
      ROOMNO: "",
      defaultProps: {
        children: "children",
        label: "ROOMNAME"
      },
      popoverShow: false,
      resData: "",
      treedata: []
    };
  },
  mounted() {
      this.queryRoom();
    },
  methods: {
    handleNodeClick(data) {
      if (data.ROOMNO != "11111"&&"22222") {
        this.ROOMNAME = data.ROOMNAME;
        this.ROOMNO = data.ROOMNO;
        this.popoverShow = false;
        this.$emit("getRoomName", data);
      }
    },
    //查询房间
    async queryRoom() {
      let resBody = new queryRoomInfo();
      resBody.data.OPERFLAG = "S"; //操作标志
      resBody.data.pageflag = 4; //分页标识(1-最后一页,2-上一页,3-下一页,4-当前页)
      resBody.data.pagerownum = 100; //表格每页的条数
      resBody.data.currpage = 1; //当前页
      // console.log("房间信息查询query的resBody.data",resBody.data);
      requestYg(resBody)
        .then(response => {
          // console.log("房间信息查询的response，", response);
          // ? response.RSP_BODY.TOTALROWNUM
          // : 0;
          if (response.SYS_HEAD.ReturnCode === "000000") {
            let data = response.RSP_BODY.struct || [];
            data.push(
              {
                ROOMNO: "11111",
                ROOMNAME: "金坛中心",
                FATHERBRANCHID: "00000",
                disabled: true
              },
              {
                ROOMNO: "22222",
                ROOMNAME: "武进中心",
                FATHERBRANCHID: "00000",
                disabled: true
              }
            );
            for (let i = 0; i < data.length; i++) {
              if (data[i].CENTERNAME == "金坛中心") {
                data[i].FATHERBRANCHID = "11111";
              } else if (data[i].CENTERNAME == "武进中心") {
                data[i].FATHERBRANCHID = "22222";
              }
            }
            this.resData = data;
            this.toJson();
            this.$emit("queryMap",this.resData,this.ROOMNO);
          } else {
            this.$message({
              type: "error",
              message: response.SYS_HEAD.ReturnMessage
            });
            this.$emit("table");
          }
        })
        .catch(error => {
          this.loading = false;
        });
    },
    toJson() {
      let _this = this;
      Array.prototype.ToTreeJson = function(pid) {
        var result = [],
          temp;
        for (var i in this) {
          if (this[i].FATHERBRANCHID == pid) {
            // console.log("this", this[i]);
            result.push(this[i]);
            temp = _this.circlefn(this, this[i].ROOMNO);
            if (temp.length > 0) {
              this[i].children = temp;
            }
          }
        }
        return result;
      };
      this.treedata = this.resData.ToTreeJson("00000");
      // console.log(this.treedata);
    },
    circlefn(data, pid) {
      var result = [],
        temp;
      for (var i in data) {
        if (data[i].FATHERBRANCHID == pid) {
          result.push(data[i]);
          temp = this.circlefn(data, data[i].ROOMNO);
          if (temp.length > 0) {
            data[i].children = temp;
          }
        }
      }
      return result;
    }
  },
  watch: {},
  mounted() {
    this.queryRoom();
  },
  updated() {}
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.el-input /deep/.el-input__inner {
  cursor: pointer;
}

.el-popover /deep/.el-input__inner {
  cursor: text;
}
.el-popover {
  width: auto !important;
  height: 400px !important;
  overflow: auto;
}
</style>

